<script lang="ts" setup name="KeywordList">
// 导入KeywordHighLight组件
import KeywordHighLight from './KeywordHighLight'

// 定义props
defineProps({
  // 关键词列表
  list: {
    type: Array<string>,
    default: () => []
  },
  // 关键词
  keyword: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <!-- 关键词列表容器 -->
  <div class="keyword_list">
    <!-- 遍历关键词列表 -->
    <div class="keyword_list__item" v-for="(item, index) in list" :key="index">
      <!-- 使用KeywordHighLight组件高亮显示关键词 -->
      <KeywordHighLight :originText="item" :keyword="keyword" @click="$emit('clickItem', item)" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.keyword_list {
  padding: 0 16px;

  &__item {
    padding: 12px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);

    &:not(:last-child) {
      border-bottom: 0.5px solid #e7e7e7ff;
    }
  }
}
</style>
